<template>
  <div>
    <!-- echarts图表 -->
    <!-- <div id="line"></div> -->
    <div id="chinaMap"></div>
    <!-- <div id="worldMap"></div> -->
  </div>
</template>

<script>
import { getProvData } from "@/request/api";
import axios from "axios";
export default {
  name: "ChartsMap",
  data() {
    return {
      newsList: [
        {
          name: "内蒙古",
          value: 1000,
          itemStyle: { normal: { areaColor: "#e55a4e" } }
        },
        {
          name: "安徽",
          value: 5,
          itemStyle: { normal: { areaColor: "#fdebcf" } }
        },
        {
          name: "青海",
          value: 5,
          itemStyle: { normal: { areaColor: "#fdebcf" } }
        },
        {
          name: "广东",
          value: 5,
          itemStyle: { normal: { areaColor: "#fdebcf" } }
        },
        {
          name: "上海",
          value: 1024,
          itemStyle: { normal: { areaColor: "#cb2a2f" } }
        },
        {
          name: "北京",
          value: 5,
          itemStyle: { normal: { areaColor: "#f59e83" } }
        },
        {
          name: "河南",
          value: 34,
          itemStyle: { normal: { areaColor: "#f59e83" } }
        },
        {
          name: "云南",
          value: 5673,
          itemStyle: { normal: { areaColor: "#f59e83" } }
        },
        {
          name: "新疆",
          value: 345,
          itemStyle: { normal: { areaColor: "#fdebcf" } }
        },
        {
          name: "四川",
          value: 123,
          itemStyle: { normal: { areaColor: "#fdebcf" } }
        }
      ]
    };
  },
  mounted() {
    // 调用直线图
    // this.$charts.line("line")
    // 调用中国地图

    // 调用世界地图
    // this.$charts.worldMap("worldMap")

    //获取省市疫情数据
    axios.get(`http://iwenwiki.com/wapicovid19/all.php`).then(res => {
      // console.log(res);
      if (res.status === 200) {
        var allCitys = [];
        for (var i = 0; i < res.data.retdata.length; i++) {
          var temp = {
            name: res.data.retdata[i].xArea,
            value:res.data.retdata[i].curConfirm
            // itemStyle: {  //在配置echarts中使用了映射属性 visualMap 就不需要这一步操作了
            //   normal: {
            //     areaColor: this.setColor(this.newsList[i].value)
            //   }
            // }
          };
          allCitys.push(temp);
        }
        this.$charts.chinaMap("chinaMap", allCitys);
      }
    });
    // 此接口暂时处于维护中
    // getProvData({
    //   key: "62e34ad34025d5d5127135efa58d4ca8"
    // }).then(res => {
    //   console.log(res);
    //   //数据格式 {name:'内蒙古',value:10,itemStyle:{normal:{areaColor:"#f00"}}}
    // });

    //  获取模拟newsList数据地图的分布情况
    // var allCitys = [];
    // for (var i = 0; i < this.newsList.length; i++) {
    //   var temp = {
    //     name: this.newsList[i].name,
    //     value: this.newsList[i].value
    //     // itemStyle: {  //在配置echarts中使用了映射属性 visualMap 就不需要这一步操作了
    //     //   normal: {
    //     //     areaColor: this.setColor(this.newsList[i].value)
    //     //   }
    //     // }
    //   };
    //   allCitys.push(temp);
    // }
    // this.$charts.chinaMap("chinaMap", allCitys);
  },
  methods: {
    // 根据传入的val值判断应该是什么颜色样式
    setColor(val) {
      var currentColor = "";
      switch (true) {
        case val == 0:
          currentColor = "#fff";
          break;
        case val > 0 && val < 10:
          currentColor = "#FDFDCF";
          break;
        case val > 10 && val < 100:
          currentColor = "#FE9E83";
          break;
        case val > 100 && val < 500:
          currentColor = "#E55A4e";
          break;
        case val > 500 && val < 10000:
          currentColor = "#4F070D";
          break;
      }
      return currentColor;
    }
  }
};
</script>

<style scoped lang="less">
#line {
  width: 80%;
  height: 400px;
  margin: 0 auto;
}
#chinaMap {
  width: 100%;
  height: 400px;
  margin: 0 auto;
}
#worldMap {
  width: 100%;
  height: 400px;
  margin: 0 auto;
}
.title {
  border-top: 0.005rem solid #ebebeb;
  border-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: start;
  justify-content: flex-start;
  height: 0.44rem;
  padding: 0 0.16rem;
  font-weight: 500;
  font-size: 0.17rem;
  line-height: 0.44rem;
  background: #fff;
  &:before {
    content: "";
    width: 5px;
    height: 20px;
    background: #4169e2;
    margin-right: 10px;
  }
}
</style>
